<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebWrite Table Test</title>
<link rel="stylesheet" type="text/css" href="css/layout1.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script>
function createTable() {
	var row = document.getElementById("rowCount").value;
	var col = document.getElementById("colCount").value;
	drawTable(row, col);
}

function drawTable(row, col){
	var tableDIV = document.createElement("div");
	var newTable = document.createElement("table");
	newTable.setAttribute("id", "newTable");
	newTable.setAttribute("class", "newTable");
	newTable.style.border = "1px solid black";
	newTable.addEventListener("mousedown", selectCell, false);
	
	var tableBody = document.createElement("tbody");
	var tableRow, tableCol, tableRowDiv;
	for (var i = 0; i<col; i++) {
		tableCol = document.createElement("tr");
		tableCol.style.border = "1px solid black";
        for (var j = 0; j<row; j++) {
        	cell = document.createElement("td");
        	cell.style.border = "1px solid black";
        	
        	tableRowDiv = document.createElement("div");
        	tableRowDiv.setAttribute("contenteditable", "true");
        	tableRowDiv.style.width = "100px";
        	tableRowDiv.style.height = "40px";
        	tableRowDiv.style.padding = "7px";
        	
        	cell.appendChild(tableRowDiv);
        	tableCol.appendChild(cell);
        }
        tableBody.appendChild(tableCol);
	}

    newTable.appendChild(tableBody);
    tableDIV.appendChild(newTable);
    document.getElementById("content").appendChild(tableDIV);
}

function addRow(tableID) {
	var myTable = document.getElementById(tableID);
	var rowCount = myTable.rows[0].cells.length;
	console.log("rowCount = " + rowCount);
	var newRow = myTable.insertRow(0);
	for(var i=0; i<rowCount; i++){
		var newCell = newRow.insertCell(0);
		newCell.style.border = "1px solid black";
		
		tableRowDiv = document.createElement("div");
    	tableRowDiv.setAttribute("contenteditable", "true");
    	tableRowDiv.style.width = "100px";
    	tableRowDiv.style.height = "40px";
    	tableRowDiv.style.padding = "7px";
    	
		newCell.appendChild(tableRowDiv);
	}
}

function deleteRow(tableID) {
	var myTable = document.getElementById(tableID);
	myTable.deleteRow(0);
}

function addCol(tableID) {
	var myTable = document.getElementById(tableID);
	var colCount = myTable.rows.length;
	console.log("colCount = " + colCount);
	for(var i=0; i<colCount; i++){
		var newCell = myTable.rows[i].insertCell(0);
		newCell.style.border = "1px solid black";
		newCell.setAttribute("id", "cell" + i);
		
		tableRowDiv = document.createElement("div");
    	tableRowDiv.setAttribute("contenteditable", "true");
    	tableRowDiv.style.width = "100px";
    	tableRowDiv.style.height = "40px";
    	tableRowDiv.style.padding = "7px";
    	
    	newCell.appendChild(tableRowDiv);
	}
}

function deleteCol() {
	var tables = document.getElementsByTagName('table');
	for (var i = tables[0].rows.length - 1; i >= 0; i--) {
		  tables[0].rows[i].deleteCell(0);
	}
}

function setBorderColor(tableID, color) { // 테두리 색상
	var myTable = document.getElementById(tableID);
	var newColor = color;
	if ( myTable.style ) {
		myTable.style.borderColor = newColor;
	}
}

function setCellBorderColor(tableID, color) { // 테두리 색상
	var myTable = document.getElementById(tableID);
	var newColor = color;
	if ( myTable.style ) {
		myTable.style.borderColor = newColor;
	}
}

function setBackColor(tableID, color) { // 배경 색상
	//var myTable = document.getElementById(tableID);
	var newColor = color;
	$(this).css("background-color", newColor);
	/*if ( myTable.style ) {
		myTable.style.backgroundColor = newColor;
	}*/
}

var dragStart = 0;
var dragEnd = 0;

function selectCell() {
	  var active = false;
	  
		$(document).mousedown(function(ev) {
			$(".highlight").removeClass("highlight"); // clear previous selection
		});

		$("td").mousedown(function(ev) {
            dragStart = $("td").index($(this));
			active = true;
		});

		$("td").mousemove(function(ev) {
			if (active) {
				dragEnd = $("td").index($(this));
                selectRange();
			}
		});
		
		$("td").mouseup(function(ev) {
             active = false;
		});
}

function selectRange() {
    $("td").removeClass("highlight");
    if (dragEnd + 1 < dragStart) { // reverse select
        $("td").slice(dragEnd, dragStart + 1).addClass("highlight");
    } else {
        $("td").slice(dragStart, dragEnd + 1).addClass("highlight");
    }
}
</script>
</head>
<body>
행 : <input type="text" id="rowCount">
열 : <input type="text" id="colCount">
<input type="button" id="createTable" onclick="createTable()" value="테이블 생성">
<br>
<input type="button" id="addRowBtn" onclick="addRow('newTable')" value="+Row">
<input type="button" id="createTable" onclick="deleteRow('newTable')" value="-Row">
<input type="button" id="addColBtn" onclick="addCol('newTable')" value="+Col">
<input type="button" id="createTable" onclick="deleteCol()" value="-Col">
<input type="color" id="border-color">
<input type="button" id="border" onclick="setBorderColor('newTable', document.getElementById('border-color').value)" value="테두리 색상 적용">
<input type="color" id="background-color">
<input type="button" id="color" onclick="setBackColor('newTable', document.getElementById('background-color').value)" value="배경 색상 적용">

<div id="editorContainer">
	<div id="content" class="content" contenteditable="true">
	</div>
</div>

</body>
</html>